<template>
  <q-dialog v-model="checkInDatePopup">
    <div class="q-pa-md">
      <div class="q-gutter-md row items-start">
        <q-date v-model="order.orderDetail.check_in" mask="YYYY-MM-DD HH:mm:ss">
          <div class="row items-center justify-end">
            <q-btn v-close-popup label="Close" color="primary" flat />
          </div>
        </q-date>
      </div>
    </div>
  </q-dialog>
  <MyBigDialog title="Order details">
    <ScrollArea :bot-margin="120">
      <q-card class="row">
        <div class="col-5 p-status">
          <div class="fal"></div>
          <div>
            <div>
              <q-card-section>
                <div class="row q-gutter-y-sm">
                  <div class="col-12 fal">
                    <div class="p-status-field">Stock Code:</div>
                    <div v-if="parts">{{ parts.stock_code }}</div>
                  </div>
                  <div class="col-12 fal">
                    <div class="p-status-field">Short Description:</div>
                    <div v-if="parts">{{ parts.description }}</div>
                  </div>

                  <div class="col-12 fal">
                    <div class="p-status-field">Serial No. :</div>
                    <div v-if="parts">{{ parts.serial_no }}</div>
                    <ObsolescenceTip
                      v-if="parts && parts.obsolescence == 1"
                    ></ObsolescenceTip>
                  </div>
                  <div class="fal col-12">
                    <div class="p-status-field">Defit from Car:</div>
                    <div v-if="parts">{{ order.car }}</div>
                  </div>
                  <div class="fal col-12">
                    <div class="p-status-field">Workgroup:</div>
                    <div v-if="order">{{ order.orderDetail.workgroup }}</div>
                  </div>

                  <div class="fal col-12">
                    <div class="p-status-field">System:</div>
                    <div v-if="parts">{{ parts.system }}</div>
                  </div>
                </div>
              </q-card-section>
            </div>
          </div>
        </div>
        <!-- <div class="col-7" v-if="parts && parts.lv5.length == 0">
        <PartsMap
          v-if="parts && parts.serial_no != ''"
          :item="parts"
        ></PartsMap>
      </div> -->

        <div class="col-12 q-pa-sm">
          <!-- <q-tabs
          v-model="tab"
          dense
          activeBgColor="white"
          indicator-color="primary"
          content-class="tabs-css"
          align="justify"
          style="background-color: #dae3f4"
          narrow-indicator
        >
          <q-tab
            style="width: 100px"
            name="return"
            :label="igiform ? 'IGI Form' : 'Return Label (Part 1)'"
          />
          <q-tab style="width: 100px" name="part2" label="Part 2" 
          v-if="!igiform"

          />
        </q-tabs> -->
          <div class="q-ma-md sub-header">
            {{ igiform ? 'IGI Form' : 'Return Label (Part 1)' }}
          </div>

          <q-separator inset />
          <div class="row">
            <div class="col-12">
              <q-card flat class="col-8">
                <q-card-section class="row" v-if="!igiform">
                  <div class="fal col-3">CEWS Work Order(WO) NO. :</div>
                  <q-input
                    class="input-css col-8"
                    borderless
                    v-model="order.orderDetail.work_order_no"
                    :dense="true"
                    hide-bottom-space
                    :readonly="isOrderComplete"
                    stack-label
                    :rules="[
                      (val) =>
                        (val.length == 10 && Number.isInteger(parseInt(val))) ||
                        'Work Order should be 10 numbers',
                    ]"
                  />
                </q-card-section>

                <!-- <q-separator inset /> -->

                <q-card-section class="col-8">
                  <div class="row">
                    <div class="fal col-2" v-if="!igiform">
                      Reported Date<span style="color: red">*</span>:
                    </div>
                    <div class="col-4 q-my-sm" v-if="!igiform">
                      <div style="max-width: 300px">
                        <q-input
                          class="input-css"
                          borderless
                          v-model="order.orderDetail.report_date"
                          dense
                          :readonly="isOrderComplete"
                        >
                          <template v-slot:append>
                            <q-icon
                              class="cursor-pointer"
                              size="md"
                              @click="
                                isOrderComplete
                                  ? (datePopup = false)
                                  : (datePopup = true)
                              "
                            >
                              <img :src="dateIcon" />
                            </q-icon>
                          </template>
                        </q-input>
                      </div>
                    </div>

                    <q-dialog v-model="datePopup">
                      <div class="q-pa-md">
                        <div class="q-gutter-md row items-start">
                          <q-date
                            mask="YYYY-MM-DD"
                            v-model="order.orderDetail.report_date"
                            minimal
                            @update:model-value="datePopup = false"
                          />
                        </div>
                      </div>
                    </q-dialog>

                    <div class="fal col-2" v-if="igiform">Received Date:</div>
                    <div class="col-4 q-my-sm" v-if="igiform">
                      <div style="max-width: 300px">
                        <q-input
                          class="input-css"
                          borderless
                          v-model="order.orderDetail.received_date"
                          :readonly="isOrderComplete"
                          dense
                        >
                          <template v-slot:append>
                            <q-icon
                              class="cursor-pointer"
                              size="md"
                              @click="
                                isOrderComplete
                                  ? (datePopup = false)
                                  : (datePopup = true)
                              "
                            >
                              <img :src="dateIcon" />
                            </q-icon>
                          </template>
                        </q-input>
                      </div>
                    </div>

                    <q-dialog v-model="datePopup">
                      <div class="q-pa-md">
                        <div class="q-gutter-md row items-start">
                          <q-date
                            mask="YYYY-MM-DD"
                            v-model="order.orderDetail.received_date"
                            minimal
                            @update:model-value="datePopup = false"
                          />
                        </div>
                      </div>
                    </q-dialog>

                    <div class="fal col-2">
                      M' tce Type<span style="color: red">*</span>:
                    </div>
                    <div class="col-4 q-my-sm">
                      <div style="max-width: 300px">
                        <q-select
                          borderless
                          v-model="order.orderDetail.mtce_type"
                          input-debounce="0"
                          hide-bottom-space
                          lazy-rules
                          :options="mtce_type_opts"
                          class="input-css"
                          :readonly="isOrderComplete"
                          :dense="true"
                        >
                        </q-select>
                      </div>
                    </div>
                  </div>

                  <div class="row" v-if="igiform">
                    <div class="q-my-sm fal col-4">PO No. :</div>
                    <q-input
                      class="q-my-sm input-css col-8"
                      borderless
                      v-model="order.orderDetail.po_no"
                      :dense="true"
                      hide-bottom-space
                      :readonly="isOrderComplete"
                      stack-label
                    />
                    <div class="q-my-sm fal col-4">Inspection No. :</div>
                    <q-input
                      class="q-my-sm input-css col-8"
                      borderless
                      v-model="order.orderDetail.inspection_no"
                      :dense="true"
                      hide-bottom-space
                      :readonly="isOrderComplete"
                      stack-label
                    />
                  </div>

                  <span v-if="!igiform">
                    <div class="row">
                      <div class="fal col-2">
                        Check In Date<span style="color: red">*</span>:
                      </div>
                      <div class="col-4 q-my-sm">
                        <div style="max-width: 300px">
                          <q-input
                            class="input-css"
                            borderless
                            v-model="order.orderDetail.check_in"
                            dense
                            :readonly="isOrderComplete"
                          >
                            <template v-slot:append>
                              <q-icon
                                class="cursor-pointer"
                                size="md"
                                @click="
                                  isOrderComplete
                                    ? (checkInDatePopup = false)
                                    : (checkInDatePopup = true)
                                "
                              >
                                <img :src="dateIcon" />
                              </q-icon>
                            </template>
                            <template v-slot:prepend>
                              <q-icon name="access_time" class="cursor-pointer">
                                <q-popup-proxy>
                                  <q-time
                                    v-model="order.orderDetail.check_in"
                                    mask="YYYY-MM-DD HH:mm:ss"
                                    format24h
                                  >
                                    <div class="row items-center justify-end">
                                      <q-btn
                                        :disable="isOrderComplete"
                                        v-close-popup
                                        label="Close"
                                        color="primary"
                                        flat
                                      />
                                    </div>
                                  </q-time>
                                </q-popup-proxy>
                              </q-icon>
                            </template>
                          </q-input>
                        </div>
                      </div>

                      <div class="fal col-2">Location:</div>
                      <div class="col-4 q-my-sm">
                        <div style="max-width: 300px">
                          <q-input
                            class="input-css"
                            borderless
                            v-model="order.orderDetail.location"
                            :readonly="isOrderComplete"
                            :dense="true"
                          />
                        </div>
                      </div>
                    </div>

                    <div class="row">
                      <div class="fal col-2">Line:</div>
                      <div class="col-4 q-my-sm">
                        <div style="max-width: 300px">
                          <q-input
                            class="input-css"
                            borderless
                            v-model="order.orderDetail.line"
                            :readonly="isOrderComplete"
                            :dense="true"
                          />
                        </div>
                      </div>
                      <div class="fal col-2">
                        Parent WO No./ <br />
                        Line Work Order: <span style="color: red">*</span>
                      </div>
                      <div class="col-4 q-my-sm">
                        <div style="max-width: 300px">
                          <q-input
                            class="input-css"
                            borderless
                            v-model="order.orderDetail.parent_work_order_no"
                            :readonly="isOrderComplete"
                            :dense="true"
                          />
                        </div>
                      </div>
                    </div>

                    <!-- <div class="row">
          <div class="fal col-4">
            Department/Section :<span style="color: red">*</span>
          </div>

          <q-input
            borderless
            v-model="order.orderDetail.department"
            input-debounce="0"
            hide-bottom-space
            stack-label
            :rules="[(val) => val.length > 0 || 'Require field']"
            lazy-rules
            class="col-8 q-my-sm input-css"
            :readonly="isOrderComplete"
            :dense="true"
          />
        </div> -->

                    <!-- <div class="row">
          <div class="fal col-4">
            Parent/Rel. Wo No. :<span style="color: red">*</span>
          </div>

          <q-input
            borderless
            v-model="order.orderDetail.parent_work_order_no"
            hide-bottom-space
            lazy-rules
            :readonly="isOrderComplete"
            class="col-8 q-my-sm input-css"
            :dense="true"
          />
        </div> -->

                    <div class="row">
                      <!-- <div class="fal col-2">I/O Counter:</div>
          <div class="col-4 q-my-sm">
            <div style="max-width: 300px">
              <q-input
                class="input-css"
                borderless
                v-model="order.orderDetail.io_counter"
                :readonly="isOrderComplete"
                :dense="true"
              />
            </div>
          </div> -->
                      <!--  <div class="col-4 q-my-sm">
          <div style="max-width: 300px">
            <q-select
              borderless
              v-model="order.orderDetail.io_counter"
              input-debounce="0"
              hide-bottom-space
              lazy-rules
              :options="depotOpts"
              class="input-css"
              :disable="isOrderComplete"
              :dense="true"
            >
            </q-select>
          </div>
        </div> -->

                      <div class="fal col-2">
                        Workgroup<span style="color: red">*</span>:
                      </div>

                      <div class="col-4 q-my-sm">
                        <div style="max-width: 300px">
                          <q-select
                            borderless
                            v-model="order.orderDetail.workgroup"
                            input-debounce="0"
                            hide-bottom-space
                            lazy-rules
                            :options="inputOptionStore.data.workgroup"
                            class="input-css"
                            :readonly="isOrderComplete"
                            :dense="true"
                          >
                          </q-select>
                        </div>
                      </div>
                    </div>

                    <div class="row">
                      <div class="fal col-2">Delay (I):</div>
                      <div class="col-4 q-my-sm">
                        <div style="max-width: 300px">
                          <q-input
                            class="input-css"
                            borderless
                            v-model="order.orderDetail.delay_i"
                            :readonly="isOrderComplete"
                            :dense="true"
                          />
                        </div>
                      </div>

                      <div class="fal col-2">Delay (A):</div>

                      <div class="col-4 q-my-sm">
                        <div style="max-width: 300px">
                          <q-input
                            class="input-css"
                            borderless
                            v-model="order.orderDetail.delay_a"
                            :readonly="isOrderComplete"
                            :dense="true"
                          />
                        </div>
                      </div>
                    </div>

                    <div class="row">
                      <div class="fal col-4">
                        Eqpt. Description:<span style="color: red">*</span>
                      </div>
                      <q-input
                        class="col-8 q-my-sm input-css"
                        hide-bottom-space
                        borderless
                        v-model="order.orderDetail.eqpt_description"
                        stack-label
                        :rules="[(val) => val.length > 0 || 'Require field']"
                        :disable="true"
                        :dense="true"
                      />
                    </div>

                    <div class="row">
                      <div class="fal col-4">
                        Failure Symptom:<span style="color: red">*</span>
                      </div>
                      <q-input
                        class="col-8 q-my-sm input-css"
                        type="textarea"
                        hide-bottom-space
                        borderless
                        stack-label
                        :rules="[(val) => val.length > 0 || 'Require field']"
                        v-model="order.orderDetail.failure_symptom"
                        :readonly="isOrderComplete"
                        :dense="true"
                      />
                    </div>

                    <div class="row">
                      <div class="fal col-4">Remark:</div>
                      <q-input
                        class="col-8 q-my-sm input-css"
                        borderless
                        v-model="order.orderDetail.remark"
                        :readonly="isOrderComplete"
                        :dense="true"
                      />
                    </div>
                  </span>
                </q-card-section>
              </q-card>

              <!-- </q-tab-panel> -->
              <q-separator inset v-if="!igiform" />
              <div v-if="!igiform" class="q-ma-md sub-header">Part 2</div>
              <q-card-section v-if="!igiform">
                <div class="row">
                  <div class="fal col-5">Contractor's Liability? :</div>
                  <div class="q-pa-sm">
                    <div class="q-gutter-sm">
                      <q-radio
                        v-model="order.orderDetail.contractor_liability"
                        val="no"
                        label="no"
                        color="primary"
                        :disable="isOrderComplete"
                      />
                      <q-radio
                        v-model="order.orderDetail.contractor_liability"
                        val="yes"
                        label="yes"
                        color="primary"
                        :disable="isOrderComplete"
                      />
                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="fal col-5">DLC Form No. :</div>
                  <div class="q-pa-sm col-7">
                    <div class="q-gutter-sm">
                      <q-input
                        borderless
                        class="input-css"
                        v-model="order.orderDetail.dlc_form_no"
                        :dense="true"
                        :disable="isOrderComplete"
                      />
                    </div>
                  </div></div
              ></q-card-section>

              <!-- <q-tab-panel v-if="!igiform" name="part2" class="col-12"> -->
              <!-- </q-tab-panel> -->

              <!-- </q-tab-panels> -->
              <!-- 
            <div class="col-4">
              <div class="q-pa-md">
                <div class="q-gutter-sm">
                  <QRCodeComponent :action="'GET'"></QRCodeComponent>
                </div>
              </div>
            </div> -->
            </div>
          </div>
        </div>
      </q-card>
    </ScrollArea>
    <q-card-actions v-if="!isOrderComplete" class="justify-evenly q-pa-md">
      <q-btn label="Cancel" class="q-ml-sm blue-btn" @click="cancelEdit" />
      <q-btn
        label="Edit"
        class="default-btn"
        type="submit"
        @click="submitEdit"
      />
    </q-card-actions>
  </MyBigDialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Parts, RepairOrder } from 'src/services/type';
import { getPartDetailData } from 'src/services/partsService';
import PopupContainer from 'src/components/container/PopupContainer.vue';
import {
  getOrderDetailData,
  getOrderDetailLabel2Data,
  patchRepairOrder,
} from 'src/services/repairService';
import CheckInForm1 from 'src/components/checkInOut/CheckInForm1.vue';
import CheckInForm2 from 'src/components/checkInOut/CheckInForm2.vue';
import MyBigDialog from '../container/MyBigDialog.vue';
import ScrollArea from '../ScrollArea.vue';
import ObsolescenceTip from '../ObsolescenceTip.vue';
import dateIcon from 'src/assets/style/date.png';

import { useInputOption } from 'src/stores/inputOptionStore';
import { useQuasar } from 'quasar';

import { formatDateTimeString } from 'src/utils/dateUtils'

const $q = useQuasar();

const mtce_type_opts = ref([]);


const datePopup = ref(false);
const checkInDatePopup = ref(false);

const inputOptionStore = useInputOption();
inputOptionStore.init();

const props = defineProps<{
  orderId: number;
  partId: number;
}>();
const igiform = ref(false);

const isOrderComplete = ref(false);

const parts = ref<Parts>();
const order = reactive<{ orderDetail: RepairOrder }>({
  orderDetail: {
    id: 0,
    cews_order: '',
    serial_no: '',
    work_order_no: '',
    car: '',
    mtce_type: '',
    report_date: '',
    location: '',
    department: '',
    failure_symptom: '',
    eqpt_description: '',
    remark: '',
    status: '',
    io_counter: '',
    workgroup: '',
    check_in: '',
    parent_work_order_no: '',
    contractor_liability: '',
    dlc_form_no: '',
    designated_person_name: '',
    date: '',
    inspection_no: '',
    received_date: '',
    order_no: '',
  },
});
/* const part_id = parseInt(route.params.id as '',; */

async function initParts() {
  const res = await getPartDetailData(props.partId);
  parts.value = res.data;
}

async function initOrder() {
  const res = await getOrderDetailData(props.orderId);
  const oi = await getOrderDetailLabel2Data(props.orderId);
  console.log(res.data);
  console.log(oi.data);

  order.orderDetail = res.data;
  order.orderDetail.check_in = formatDateTimeString(order.orderDetail.check_in)
  order.orderDetail.dlc_form_no = oi.data.dlc_no
  if (oi.data.contractor_liability=='Y'){
    order.orderDetail.contractor_liability = 'yes'
  }else{
    order.orderDetail.contractor_liability = 'no'
  }
  if (res.data.status == 'COMPLETE*' || res.data.status == 'COMPLETE') {
    isOrderComplete.value = true;
  }
  if (res.data.mtce_type == 'IGI') {
    mtce_type_opts.value = ['IGI'];
    igiform.value = true;
  } else {
    mtce_type_opts.value = ['CM', 'PM', 'NM'];
  }
}
initParts();
initOrder();

const emit = defineEmits(['close','submit']);

function cancelEdit() {
  emit('close');
}

async function submitEdit() {
  console.log(order.orderDetail);
  const res = await patchRepairOrder(order.orderDetail);
  console.log(res.data);
  if (res.data) {
    $q.notify({
      message: 'success',
      color: 'positive',
    });
  }
  emit('submit');
}
</script>

<style>
.p-status {
  min-width: 350px;
}
.p-status-field {
  font-size: 1.1rem;
  font-weight: 700;
  width: auto;
  padding: 3px;
}
.status-color-red {
  width: 42px;
  height: 18px;
  background-color: red;
  margin: 5px;
}
.header {
  font-size: 1.4rem;
  font-weight: 900;
  margin: 10px;
}

.right-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
